.<template>
  <div>
    <!-- search start -->
    <search-bar placeHolder="请输入用户名/车牌号"
                @handleSearch="init" />
    <!-- search end -->
    <!-- 表格数据 -->
    <div class="box">
      <v-table :tableData='tableData'
               :tableLabel="tableLabel"
               @policyDetail="policyDetail"
               v-loading="loading" />
      <!-- 分页器 -->
      <ubi-paging :page.sync="page"
                  style="position:absolute;bottom:0;"
                  :pageSize.sync="pageSize"
                  :pageCount="total" />
    </div>
    <!-- 保单信息弹框 -->
    <v-dialog :show.sync="isShowIPolicyInfo"
              :appendToBody=true
              title="保单信息">
      <template>
        <el-table :data="mock"
                  border
                  style="width: 100%">
          <el-table-column prop="policy_num"
                           label="投单号"
                           align="center">
          </el-table-column>
          <el-table-column prop="start_time"
                           label="投保日期"
                           align="center">
          </el-table-column>
          <el-table-column prop="end_time"
                           label="截止日期"
                           align="center">
          </el-table-column>
          <el-table-column label="险种"
                           align="center">
            <template slot-scope='scope'>
              <el-button type="text"
                         @click="childShow = true">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="total"
                           label="投保总额"
                           align="center">
          </el-table-column>
        </el-table>
      </template>
      <el-dialog width="30%"
                 title="险种详情"
                 :center="true"
                 :visible.sync="childShow"
                 append-to-body>
        <template>
          <div class="insurance">
            <el-table :data="insuranceS"
                      border
                      style="width: 100%">
              <el-table-column prop="type"
                               label="险种"
                               align="center">
              </el-table-column>
              <el-table-column prop="value"
                               label="险种金额"
                               align="center">
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-dialog>
    </v-dialog>
  </div>
</template>

<script>
import ubiPaging from '../../common/ubi-data-pagination'

export default {
  data () {
    return {
      activeDate: '', //搜索选中的日期
      page: 1, // 当前页
      pageSize: 8, //每页显示多少条数据
      searchkey: '', //搜索关键字
      tableData: [],//保单列表数据
      tableLabel: [ //对应v-table的标签名和返回的数据键值
        {
          label: '用户姓名',
          prop: 'name'

        },
        {
          label: '用户电话',
          prop: 'phone'

        },
        {
          label: '设备号',
          prop: 'eq_num'

        },
        {
          label: 'vin码',
          prop: 'vin'

        },
        {
          label: '车牌号',
          prop: 'plate'

        },
        {
          label: '保单信息',
          detail: true,
          methodName: "policyDetail",
          prop: 'pid',
          btnText: '详情'
        }
      ],
      total: 0,//分页总条数
      isShowIPolicyInfo: false, //保單信息弹框默认隐藏
      childShow: false,//險種彈框默認隱藏
      mock: [], //本地数据模拟
      insuranceS: [],
      loading: false


    }
  },
  components: {
    ubiPaging
  },
  methods: {
    async init (search = this.searchkey) { //页面初始化
      this.loading = true
      const paramsStr = Object.assign({},search,{page: this.page,pageSize: this.pageSize})
      let res = await this.api.policyYet(paramsStr).then(res => res);
      this.tableData = res.data.list;
      this.total = Number(res.data.rows);
      this.loading = false;
    },
    policyDetail (id) { //保單信息
      this.api.policyDetail({ pid: id }).then(res => {
        this.mock = [];
        this.isShowIPolicyInfo = true;
        this.mock.push(res.data);
        this.insuranceS = res.data.name_price;
      })
    }
  },
  watch: {
    page () {
      this.init();
    },
    pageSize () {
      this.init();
    }
  },
  mounted () {
    this.init();
  }
}
</script>

<style rel="stylesheet/scss" lang='scss' scoped>
.box {
  position:relative;
  min-height:81vh;
  padding-bottom:40px;
  box-sizing:border-box;
}
.insurance {
  width: 100%;
  border: solid 1px #e1e1e1;
  margin: 0 auto;
}
.insurance .title {
  height: 50%;
}
.insurance .title:first-of-type {
  color: #333;
}
.insurance .title > div {
  width: 50%;
  float: left;
  text-align: center;
  line-height: 40px;
}
</style>
